<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://xmlns.jcp.org/jsf/core"
	xmlns:h="http://xmlns.jcp.org/jsf/html"
	xmlns:p="http://primefaces.org/ui"
	xmlns:ui="http://java.sun.com/jsf/facelets">

 <h:head>
        <title>Ventes Privées</title>
</h:head>
<h:body>
	<ui:include src="header.xhtml" />
<h:form>	
	<h:link value="retour" outcome="liste_produits_vp"/>
	<h:panelGrid columns="2"  style="width: 600px;margin-left: auto; margin-right: auto;">
		<f:facet name="header"><h:outputText style="text-align:center; font-size: 18;" value="#{ficheProduitCtrl.produitAffiche.libelle}" /></f:facet>
		
		<p:galleria value="#{ficheProduitCtrl.getImages()}" var="image" panelWidth="350" panelHeight="350" showCaption="false">
			<p:graphicImage library="images" name="#{image}" width="350" height="350" alt="Image Description for #{image}" title="#{image}" />
		</p:galleria>
			
		<h:panelGrid columns="1"  width="500px">
			<h:panelGroup>
				<h:outputLabel style="font-size: 14;" value="Description du produit :#{ficheProduitCtrl.produitAffiche.description}" />
				<br/><br/>
				<h:outputLabel  style="font-size: 14;" value="Prix TTC : #{ficheProduitCtrl.produitAffiche.prix} €" />
				<br/><br/><br/><br/>
			</h:panelGroup>
				
			<h:panelGrid  columns="2">
			<h:outputLabel 	style="font-size: 12;" for="couleurOl" value="Couleur :" />
			<p:selectOneMenu 	id="couleurOl" 
								value="#{ficheProduitCtrl.selectedCouleur}" 
								style="font-size: 12;width: 100px; font-size: 12;"
								converter="genericConverter"
								>
				<f:selectItem itemLabel="Aucune" itemValue="#{null}"/>
				<f:selectItems	style="font-size: 12;"
								value="#{ficheProduitCtrl.couleurs}"
								var="currentcouleur" 
								itemLabel="#{currentcouleur.couleur}" 
								itemValue="#{currentcouleur}"
								/>
				<p:ajax update="tailleOl" listener="#{ficheProduitCtrl.couleurChangeMethod}"/>
			</p:selectOneMenu>
			
			<h:outputLabel 	style="font-size: 12;" for="tailleOl" value="Taille: " />
			<p:selectOneMenu 	id="tailleOl" 
								value="#{ficheProduitCtrl.selectedTaille}"
								style="width:  100px; font-size: 12;" 
								converter="genericConverter"
								 >
				<f:selectItem 	style="font-size: 12;" itemLabel="Aucune" itemValue="#{null}"/>
				<f:selectItems 	style="font-size: 12;"
								value="#{ficheProduitCtrl.tailles}"
								var="currenttaille" 
								itemLabel="#{currenttaille.taille}"
								itemValue="#{currenttaille}"
								/>
				<p:ajax update="couleurOl" listener="#{ficheProduitCtrl.tailleChangeMethod}"/>
			</p:selectOneMenu>
			
			<h:outputLabel style="font-size: 12;" for="qty" value="Quantité: " />
			<p:spinner style="font-size: 12;" id="qty" min="1" max="10" size="4" value="#{ficheProduitCtrl.quantite}"/>
			<br />

			<p:commandButton action ="#{ficheProduitCtrl.ajouter}" value="Ajouter" style="width: 100px; font-size: 12;" />

			</h:panelGrid>
	
		</h:panelGrid>
	</h:panelGrid>
	<p:messages showDetail="true" autoUpdate="true"/>
	
</h:form>
</h:body>
</html>